<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box top-box m-b-20 flx-col-c-c">
        <h2 class="f-16 c-d f-w-600">输入您想注册的商标，在线客服极速响应</h2>
        <span class="f-14 c-g">15秒快速查询商标</span>
        <div class="flx-row-s-c" style="margin-top: 24px">
          <input
            v-model.trim="search"
            type="text"
            class="search"
            placeholder="请输入关键字查询"
            maxlength="50"
            @keyup.enter="submit"
          />
          <div class="search-buttom">查询能否注册</div>
        </div>
      </div>
      <div class="box">
        <user-tab-list :list="tablist"></user-tab-list>
        <div style="position: relative">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <div class="flx-row-s-c b-b normal-padding">
            <input
              v-model.trim="innerSearch"
              type="text"
              class="search"
              placeholder="请注入注册号、名称、中文名称"
              maxlength="50"
              style="width: 335px"
              @keyup.enter="submit"
            />
            <div class="search-buttom" style="width: 90px; margin-right: 26px">
              搜索
            </div>
            <span class="c-g f-16">热门搜索：</span>
            <span
              class="c-g f-16 type-select-item normal"
              style="padding: 0 3px"
              v-for="(item, index) in hotList"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <div class="flx-row-bw-s b-b normal-padding">
            <div class="flx-row-s-s">
              <span class="c-d2 f-14 f-w-600" style="margin-top: 6px"
                >商标分类：</span
              >
              <div
                class="flx-row-s-s categary-area"
                :class="{ 'categary-box': !suffixOpen }"
              >
                <div
                  class="type-select-item"
                  style="margin: 6px 12px"
                  v-for="(item, index) in categaryList"
                  :key="index"
                  :class="[item.select ? 'active' : 'normal']"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div
              class="c-g f-14 flx-row-s-c open-bottom"
              style="margin-top: 6px"
              @click="suffixOpen = !suffixOpen"
            >
              展开
              <div class="icon">
                <div
                  class="dir-icon"
                  :class="{ 'dir-icon-active': suffixOpen }"
                ></div>
              </div>
            </div>
          </div>
          <div class="flx-row-bw-s b-b normal-padding">
            <div class="flx-row-s-s">
              <span class="c-d2 f-14 f-w-600" style="margin-top: 6px"
                >商标类型：</span
              >
              <div
                class="flx-row-s-s categary-area"
                :class="{ 'categary-box': !suffixOpen }"
              >
                <div
                  class="type-select-item"
                  style="margin: 6px 12px"
                  v-for="(item, index) in typeList"
                  :key="index"
                  :class="[item.select ? 'active' : 'normal']"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="normal-padding">
            <span class="f-14 c-d2">搜索结果（<span class="c-o">300个</span>）</span>
          </div>
          <div class="list-area normal-padding flx-row-s-c">
            <div
              class="list-item flx-col-s-c"
              v-for="(item, index) in list"
              :key="index"
              :class="{'m-r': (index + 1) % 5 != 0}"
            >
              <div class="image" v-lazy:background-image=""></div>
              <h3 class="c-d2 w-p-100 f-18 f-w-600 title">的萨芬的萨芬士大夫的士大夫的</h3>
              <div class="type-box f-12 c-d">萨芬士大夫萨芬撒地方</div>
              <span class="c-o f-12">议价</span>
            </div>
          </div>
          <div class="form-page-bottom-area flx-row-e-c">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    userTabList: () => import("_c/tabList/userTabList.vue"),
  },
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "商标服务", to: "/rmregister" }],
      search: "",
      tablist: [
        {
          name: "商标市场",
          to: "/rmregisterm",
        },
        {
          name: "商标中介",
          to: "/rmregisteri",
        },
      ],
      innerSearch: "",
      categaryList: [
        { name: "全部", select: true },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
        { name: "01 化学原料", select: false },
      ],
      typeList: [
        { name: "全部", select: true },
        { name: "纯中文", select: false },
        { name: "纯英文（拼音）", select: false },
        { name: "纯数字", select: false },
        { name: "中文+英文（拼音）", select: false },
        { name: "图像", select: false },
      ],
      suffixOpen: false,
      hotList: ["本华", "金天星", "怒狼"],
      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [1, 2, 3 , 4, 5, 6, 7],
    };
  },
  mounted() {},
  methods: {
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box {
    background-color: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
  }
  .top-box {
    padding: 40px 0;
  }
  .search {
    @include size(580px, 46px);
    background-color: #fff;
    padding-left: 20px;
    padding-right: 15px;
    border: #f9521f solid 1px;
    border-radius: 5px 0 0 5px;
    line-height: 44px;
    font-size: 14px;
    color: #3d3d3d;
  }
  .search-buttom {
    @include size(120px, 46px);
    @include h-c(#f9521f, #fa754c, #fff, null);
    @include btn-s(null, 46px, 0 5px 5px 0);
    font-size: 14px;
  }
  .categary-box {
    height: 33px;
    overflow: hidden;
  }
  .categary-area {
    width: 1010px;
    flex-wrap: wrap;
  }
}
.m-b-20 {
  margin-bottom: 20px;
}
.b-b {
  border-bottom: 1px dashed #eaeaea;
}
.open-bottom {
  cursor: pointer;
  .icon {
    width: 15px;
    padding-left: 3px;

    .dir-icon {
      @include size(12px, 6px);
      @include bg-setting("g-down");
      transform: rotate(0);
      transition: transform 0.3s, background-image 0.3s;
    }
    .dir-icon-active {
      transform: rotate(-180deg);
    }
  }

  &:hover {
    color: #f9521f;

    .dir-icon {
      @include bg-setting("o-down");
    }
  }
}
.normal-padding {
  padding: 10px 30px;
}
.type-select-item {
  font-weight: 400;
  transition: color 0.3s, font-weight 0.3s;
  margin-right: 25px;
  cursor: pointer;

  &.normal {
    @include h-c(null, null, rgba($color: #3d3d3d, $alpha: 0.8), #f9521f);
  }
  &.active {
    font-weight: 600;
    color: #f9521f;
  }
}
.list-area {
  min-height: 160px;
  flex-wrap: wrap;

  .list-item {
    @include size(200px, 250px);
    padding: 18px 15px;
    background-color: #fff;
    border: 1px solid #eeeded;
    margin-bottom: 25px;

    &:hover {
      @include b-sh;
    }

    .image {
      @include bg-setting(null, cover, center);
      @include size(170px, 120px);
      background-color: #ededed;
      transition: opacity 0.3s;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }
    .title {
      text-align: center;
      @include f-ell-sin;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    .type-box {
      margin: 0 auto 10px;
      height: 25px;
      line-height: 25px;
      padding: 0 10px;
      min-width: 120px;
      max-width: 100%;
      text-align: center;
      background-color: #F3F3F3;
      overflow: hidden;
    }
  }
  .m-r {
    margin-right: 34px;
  }
}
</style>